
<template>
    <div class="xgmma">
        <div class="personup">
            <a href="#">个人中心</a>
            <span> > 个人资料</span>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="原始密码" prop="passwd">
                <el-input v-model="ruleForm.passwd" type="password" autocomplete="off" placeholder="请输入旧密码" />
            </el-form-item>
            <div class="upmm">
                <span class="spr">请输入原登录密码。验证通过后，才可设置新登录密码。</span>
            </div>
            <el-form-item label="新的密码" prop="newPassword">
                <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" placeholder="请输入新的密码" />
            </el-form-item>
            <div class="downmma">
                <span class="spr">请输入6-16位数字、字母(区分大小写)、符号的组合!</span>
            </div>
            <el-form-item label="再次确认密码" prop="newPassword2">
                <el-input v-model="ruleForm.newPassword2" type="password" autocomplete="off" placeholder="再次确认密码" />
            </el-form-item>
            <el-form-item class="dq">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <router-link to="/"><div class="delulu">去登录</div></router-link>
    </div>
</template>
<script lang="ts">
import { modfityPasswd } from '@/utils/api'
import { FormInstance } from 'element-plus'
import { defineComponent } from 'vue'
interface myFormDataTypeI {
    passwd: string,
    newPassword: string,
    newPassword2: string
}

// import { updatePassword } from '' //此处是接口文件可以根据自己需要更改
export default defineComponent({
    data() {
        const validatePpasswd = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入原始密码'))
            } else {
                callback()
            }
        }
        //请输入6-16位数字、字母(区分大小写)、符号的组合
        const re =/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        const validatePnewPassword = (rule: any, value: any, callback: any) => {
            // console.log(value, rule);
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (!re.test(value)) {
                callback(new Error('请输入6-16位数字、字母(区分大小写)、符号的组合'))
            } else {
                callback()
            }

        }
        const validateRetPass = (rule: any, value: any, callback: any) => {
            // console.log(value, rule);
            if (value === '') {
                callback(new Error('再次输入密码'))
            } else if (value !== (this.ruleForm as unknown as myFormDataTypeI).newPassword) {
                callback(new Error('两次输入的密码没有保持一致'))
            } else {
                callback()
            }

        }
        return {
            ruleForm: {
                passwd: '',
                newPassword: '',
                newPassword2: ''
            },
            rules: {
                //required: true 就是前面出现的红色的标签
                passwd: [{ required: true, validator: validatePpasswd, trigger: 'blur' }],
                newPassword: [{ required: true, validator: validatePnewPassword, trigger: 'blur' }],
                newPassword2: [{ required: true, validator: validateRetPass, trigger: 'blur' }],

            }
        }
    },
    methods: {
        //提交
        submitForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return;
            formEl.validate((valid) => {
                if (valid) {
                    modfityPasswd(this.ruleForm).then((res) => {
                        console.log(res);
                        if (res.data.code === 0) {
                            alert(res.data.msg)
                        } else if (res.data.code === -1) {
                            alert(res.data.msg)
                        } else {
                            alert(res.data.msg)
                        }
                    }).catch((err) => {
                        console.log(err);
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return
            formEl.resetFields()
        },

    },
})
</script>
<style lang='scss' scoped>
.xgmma {
    position: relative;
    margin: 100px auto;
    width: 800px;
    border: 1px solid #ccc;
    .personup{
        border-bottom: 1px solid #dcdcdc;
        height: 34px;
        line-height: 34px;
        margin-left: 10px;
        font-size: 12px;
        font-family: tahoma, arial, sans-serif, "宋体";
        color: #333;
        margin-bottom: 10px;
    }
}

:deep(.el-input) {
    width: 230px;
    height: 30px;
}

.spr {
    font-family: tahoma, arial, sans-serif, "宋体";
    width: 400px;
    font-size: 12px;

}

.upmm {
    position: absolute;
    right: 139px;
    top: 48px;

}

.downmma {
    position: absolute;
    right: 161px;
    top: 99px;
}
.el-form {
     margin-left: 0;
    }
    .delulu{
    width: 100px;
    height: 30px;
    margin-left: 127px;
    line-height: 30px;
    font-size: 13px;
    cursor: pointer;
}


</style> 